<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Order Wanted</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<link rel="shortcut icon" href="#"/>
</head>
<body>

<div style="font-size: 40px; font-weight:bold;">
    <center>
        {% if orderType == 'quotation' or  orderType == 'Quotation'%}
            <div class="orderWanted">Create Quotation</div>
        {% elif orderType == 'sellOrder' or orderType == 'SellOrder' or orderType == 'sellorder'%}
			<div class="orderWanted">Create SellOrder</div>
        {% endif %}
		
    </center>
</div>

<div id="OrderView" style="position: relative; left: 35%; bottom: -50px;">
    <div id="environment" style="position: relative; margin-bottom: 20px;">
        Environment：
        <select id="environmentSelect" style="font-size:20px">
            <option value="Test">Test</option>
            <option value="UAT" selected="selected">UAT</option>
            <option value="Stable">Stable</option>
        </select>
    </div>
    {% if orderType == 'quotation' or  orderType == 'Quotation'%}
        <div id="QuotationType" style="position: relative; margin-bottom: 20px;">
            QuotationShopType:
            <select id="QuotationShopType" style="font-size:20px">
                <option value="EGG Search" selected="selected">EGG Search</option>
                <option value="EGG Shop">EGG Shop</option>
                <option value="EGG Search & EGG Shop">EGG Search & EGG Shop</option>
            </select>
        </div>
		<div id="quotationStatus" style="position: relative; margin-bottom: 20px;">
		    QuotationStatus:
		    <select id="quotationStatusSelect" style="font-size:20px">
		        <option value="Created" selected="selected">Created</option>
				<option value="Quoted">Quoted</optgroup>
				<option value="OrderConverted">Order Converted To Customer</option>
		    </select>
		</div>
    {% elif  orderType == 'sellOrder' or orderType == 'SellOrder' or orderType == 'sellorder'%}
        <div id="OrderType" style="position: relative; margin-bottom: 20px;">
        OrderType：
        <select id="orderTypeSelect" style="font-size:20px">
            <option value="EGG Buy">EGG Buy</option>
            <option value="EGG Search" selected="selected">EGG Search</option>
            <option value="EGG Shop">EGG Shop</option>
        </select>
    </div>
    <div id="orderStatus" style="position: relative; margin-bottom: 20px;">
        OrderStatus:
        <select id="orderStatusSelect" style="font-size:20px">
            <option value="Created" selected="selected">Created</option>
            <option value="Confirmed">Confirmed</option>
            <option value="Picked">Picked</option>
            <option value="Packed">Packed</option>
            <option value="Packed">Invoiced</option>
        </select>
    </div>
    {% endif %}
    <div id="CustomerType" style="position: relative; margin-bottom: 20px;">
        CustomerType：
        <select id="customerTypeSelect" style="font-size:20px">
            <option value="Normal" selected="selected">Normal</option>
            <option value="Insurance">Insurance</option>
        </select>
    </div>
	<div id="PaymentMethod" style="position: relative; margin-bottom: 20px;">
	    PaymentMethod：
	    <select id="PaymentMethodSelect" style="font-size:20px">
	        <option value="CreditPayment" selected="CreditPayment">Credit Payment</option>
	        <option value="OnlinePayment">Online Payment</option>
			<option value="BankTransferBeforeDelivery">Bank Transfer Before Delivery</option>
	    </select>
	</div>
    <div id="OrderCount" style="position: relative; margin-bottom: 20px;">
        OrderCount：<input id="orderCountInput" type="number" placeholder="Please input integer between 1 and 99 !" width="128" height="28" style="font-size:20px; width: 400px;">
    </div>
    <div style="position: relative; left: 5%; top: 50px;">
        <input type="submit" value="CREATE" style="font-size:40px; background-color: #58ACFA; border-radius:15px;" onclick="createOrder()">
    </div>
	
	<div id="responseOrder" style="position: relative; top: 70px; font-size: 30px; font-weight: bold; width: 22%; background-color: #F7D358;"></div>

</div>

<script>
	window.alert = function(name){

        var iframe = document.createElement("IFRAME");
        iframe.style.display="none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    };

	window.confirm = function (message) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        var alertFrame = window.frames[0];
        var result = alertFrame.window.confirm(message);
        iframe.parentNode.removeChild(iframe);
        return result;
    };
	
    function createOrder() {
		document.getElementById("responseOrder").innerHTML = "";
	    let environment = document.getElementById("environmentSelect").value;
		let orderWanted = document.getElementsByClassName("orderWanted")[0].textContent;
        let customerType = document.getElementById("customerTypeSelect").value;
		let paymentMethod = document.getElementById("PaymentMethodSelect").value;
        let orderCount = document.getElementById("orderCountInput").value;
		if(parseInt(orderCount) === 0){
			alert("Order count must gigger than 0, please input again! ");
			return;
		}
		else if(parseInt(orderCount) < 0){
			alert("Order count must gigger than 0, please input again! ");
			return;
		}
		else{
			let data = {};
			if(orderWanted === "Create SellOrder"){
				let orderType = document.getElementById("orderTypeSelect").value;
				let orderStatus = document.getElementById("orderStatusSelect").value;
				data = {
					"sourceType": "order",
					"environment": environment,
					"orderType": orderType,
					"orderStatus": orderStatus,
					"customerType": customerType,
					"paymentMethod": paymentMethod,
					"orderCount": orderCount
				  };
			} else {
				let quotationShopType = document.getElementById("QuotationShopType").value;
				let quotationStatus = document.getElementById("quotationStatus").value;
				data = {
					"sourceType": "quotation",
					"environment": environment,
					"quotationShopType": quotationShopType,
					"quotationStatus": quotationStatus,
					"customerType": customerType,
					"paymentMethod": paymentMethod,
					"orderCount": orderCount
				  };
			}
			if(orderCount === ""){
				alert("Order count needed, please input integer! ");
			}
			else{
			
				$.ajax({
				  url: "http://127.0.0.1:8888/data/tools/createOrderWanted",
				  type: "POST",
				  data: data,
				  dataType: "json",
				  success: function( result ) {
					console.log("ResponseOrder: " + result);
					document.getElementById("responseOrder").innerHTML = "";
					for (i = 0; i < result.length; i++) {
					    var innerHtmlStr = document.getElementById("responseOrder").innerHTML;
						document.getElementById("responseOrder").innerHTML =innerHtmlStr + result[i] + "<br/>";
					 }
					 document.getElementById("responseOrder").style.backgroundColor = "#F7D358";
				  }
				});
			}
		}
    }
</script>

</body>
</html>